<template>
  <div>
    <div class="title">新增优惠卷信息</div>
    <div class="content">
      <div>
        <div class="subtitle">基本信息</div>
        <div class="subContent clear">
          <div class="float">
            <div class="inputBox">
              <span class="inputTitle"><span class="redStar">*</span>优惠卷名称：</span>
              <el-input
                      type="text"
                      placeholder="请输入优惠卷名称"
                      maxlength="15"
                      show-word-limit
                      v-model="couponName"
              >
              </el-input>
            </div>
            <div class="inputBox">
              <span class="inputTitle"><span class="redStar">*</span>优惠类型：</span>
              <el-select v-model="discountType" placeholder="请选择优惠类型">
                <el-option
                        v-for="item in discountOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="inputBox">
              <span class="inputTitle"><span class="redStar">*</span>发放数量：</span>
              <el-input
                      type="text"
                      v-model="issuedQuantity"
                      placeholder="请输入发放数量"
                      maxlength="6"
                      show-word-limit
              >
              </el-input>
              份
            </div>
            <div class="inputBox">
              <span class="inputTitle"><span class="redStar">*</span>使用说明：</span>
              <el-input
                      type="textarea"
                      v-model="instructions"
                      placeholder="请输入使用说明"
                      maxlength="500"
                      show-word-limit
                      :autosize="{ minRows: 4}"
              >
              </el-input>
            </div>
          </div>
          <div class="float">
            <div class="inputBox">
              <span><span class="redStar">*</span>优惠卷副标题：</span>
              <el-input
                      type="text"
                      placeholder="请输入优惠卷副标题"
                      maxlength="15"
                      show-word-limit
                      v-model="couponTitle"
              >
              </el-input>
            </div>
            <div class="inputBox" v-if="this.discountType==='满减卷'">
              <span><span class="redStar">*</span>满:</span>
              <el-input
                      class="littleInput"
                      type="text"
                      v-model="man"
              >
              </el-input>
              <span>减:</span>
              <el-input
                      class="littleInput"
                      type="text"
                      v-model="jian"
              >
              </el-input>
            </div>
            <div class="inputBox" v-else-if="this.discountType==='优惠卷'">
              <span><span class="redStar">*</span>减:</span>
              <el-input
                      class="littleInput"
                      type="text"
                      v-model="jian"
              >
              </el-input>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="subtitle">基本规则</div>
        <div>
          <div class="clear">
            <div class="inputBox float">
              <span class="inputTitle"><span class="redStar">*</span>用户类型：</span>
              <el-select v-model="userType" placeholder="请选择用户类型">
                <el-option
                        v-for="item in userOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="inputBox float">
              <span class="inputTitle"><span class="redStar">*</span>每人限领：</span>
              <el-input
                      type="text"
                      v-model="Limit"
                      style="width: 100px"
              />份
            </div>
          </div>
          <div>
            <span class="inputTitle"><span class="redStar">*</span>有效期：</span>
            <div class="radioBox">
              <div class="radioOption">
                <el-radio v-model="radio" label="固定日期">固定日期</el-radio>
                <el-date-picker
                        v-model="fixedDate"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
              </div>
              <div class="radioOption">
                <el-radio v-model="radio" label="领取后，当天生效，有效天数">领取后，当天生效，有效天数</el-radio>
                <el-select v-model="days">
                  <el-option
                          v-for="item in dateOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div>
            <span class="inputTitle"><span class="redStar">*</span>跳转链接：</span>
            <el-input type="text" v-model="link" placeholder="请输入跳转链接"></el-input>
          </div>
        </div>
      </div>
      <div class="btnBox">
        <div class="trueBtn" @click="tijiao">确定</div>
        <div class="cancelBtn" @click="quxiao">重置</div>
      </div>
    </div>
  </div>
</template>

<script>
    import axios from '../../tool/http'
    import api from '../../tool/api'
    export default {
        name: "coupon1",
        data(){
            return{
                couponName:'',
                discountOptions: [
                    {
                        value: '满减卷',
                        label: '满减卷'
                    },
                    {
                        value: '优惠卷',
                        label: '优惠卷'
                    }
                ],
                userOptions: [
                    {
                        value: '新用户',
                        label: '新用户'
                    },
                    {
                        value: '老用户',
                        label: '老用户'
                    }
                ],
                dateOptions: [
                    {
                        value: 1,
                        label: '1'
                    },
                    {
                        value: 2,
                        label: '2'
                    },
                    {
                        value: 3,
                        label: '3'
                    },
                    {
                        value: 4,
                        label: '4'
                    },
                    {
                        value: 5,
                        label: '5'
                    },
                    {
                        value: 6,
                        label: '6'
                    },
                    {
                        value: 7,
                        label: '7'
                    }
                ],
                discountType: '满减卷',
                issuedQuantity:'',
                instructions:'',
                couponTitle:'',
                man:'',
                jian:'',
                userType:'老用户',
                Limit:'',
                radio:'固定日期',
                fixedDate:'',
                days:1,
                link:''
            }
        },
        watch:{
            discountType:function () {
                this.man='';
                this.jian='';
            },
        },
        methods:{
            tijiao(){
                if (!this.couponName) {
                    this.$message.error('请输入优惠券名称');
                    return false
                }else if(!this.jian) {
                    this.$message.error('请输入优惠额度');
                    return false
                }else if(!this.issuedQuantity) {
                    this.$message.error('请输入发放数量');
                    return false
                }else if(!this.instructions){
                    this.$message.error('请输入使用说明');
                    return false
                }else if(!this.couponTitle){
                    this.$message.error('请输入优惠券副标题');
                    return false
                }else if(!this.Limit){
                    this.$message.error('请输入每人限领');
                    return false
                }else if(!this.link){
                    this.$message.error('请输入跳转链接');
                    return false
                }else {
                    let startTime;
                    let endTime;
                    if (this.radio==='固定日期') {
                        if (!this.fixedDate) {
                            this.$message.error('请选择有效期')
                        }else {
                            [startTime,endTime] = this.fixedDate
                        }
                    }
                    let user = sessionStorage.getItem('backUserId')
                    axios({
                        url:api.tt_createCoupon,
                        method:'post',
                        data:{
                            couponInfoName:this.couponName,
                            couponInfoTitle:this.couponTitle,
                            couponInfoType:this.discountType,
                            couponInfoCondition:Number(this.man),
                            couponInfoQuota:Number(this.jian),
                            couponInfoNumber:Number(this.issuedQuantity),
                            couponInfoExplain:this.instructions,
                            userId:Number(user),
                            couponRule:{
                                couponRuleBeginDate:startTime,
                                couponRuleEndDate:endTime,
                                couponRuleGetNumber:Number(this.Limit),
                                couponRuleJumpUrl:this.link,
                                couponRuleUserType:this.userType,
                                couponRuleDays:this.days
                            }
                        }
                    }).then(res=>{
                        this.$message.success('新增优惠券成功');
                        this.quxiao()
                    }).catch(err=>{
                        console.log(err)
                        this.$message.error('新增优惠券失败')
                    })

                }
            },
            quxiao(){
                this.couponName='';
                this.discountType='满减卷';
                this.issuedQuantity='';
                this.instructions='';
                this.couponTitle='';
                this.man='';
                this.jian='';
                this.userType='老用户';
                this.Limit='';
                this.radio='固定日期';
                this.fixedDate='';
                this.days=1;
                this.link='';
            }
        }
    }
</script>

<style scoped lang="less">
  .title{
    padding: 20px 10px;
    border-bottom: 1px solid #c0c0c0;
  }
  .content{
    padding: 10px 40px;
  }
  .subtitle{
    color: #0066FF;
  }
  .inputBox{
    margin: 15px 0;
  }
  .inputTitle{
    display: inline-block;
    width: 120px;
    text-align: right;
  }
  .redStar{
    font-size: 18px;
    color: red;
  }
  .float{
    float: left;
    margin-right: 50px;
  }
  .clear:after{
    content: "";
    display: block;
    clear: both;
  }
  .el-input{
    width: 300px;
  }
  .el-textarea{
    width: 300px;
    vertical-align: text-top;
  }
  .littleInput{
    width: 80px;
    margin: 0 10px;
  }
  .radioBox{
    display: inline-block;
    vertical-align: middle;
  }
  .radioOption{
    margin: 20px 0;
  }
  .btnBox{
    margin: 40px 30px;
  }
  .trueBtn{
    display: inline-block;
    padding: 10px 20px;
    background-color: #409EFF;
    color: white;
    border-radius: 10px;
    margin: 0 20px;
    cursor: pointer;
  }
  .cancelBtn{
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.56);
    border-radius: 10px;
    cursor: pointer;
  }
</style>